<template>
  <div>
    <div class="my_divider mtw"></div>
    <van-cell-group inset>
      <van-field
        v-model="data.obj.name"
        label="商品名"
        placeholder="请输入商品名称"
      />

      <!-- <van-field
          v-model=" data.items[0].text"
          label="商品类型"
          is-link=""
          readonly=""
          @click="type_show = true"
        /> -->

      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="商品类型"
        placeholder="请选择商品类型"
        @click="type_show = true"
      />

      <van-popup v-model:show="type_show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择商品类型"
          :options="data.options"
          @close="type_show = false"
          @finish="onFinish"
        />
      </van-popup>

      <van-field
        v-model="data.obj.specs"
        label="规格"
        placeholder="实例: 1000g | ±10g"
      />

      <van-field
        v-model="data.obj.price"
        label="商品价格"
        placeholder="请输入商品价格"
      />

      <van-cell
        title="选择单个日期"
        :value="date"
        @click="date_show = true"
        is-link
      />
      <van-calendar v-model:show="date_show" @confirm="onConfirm" />

      <van-field
        v-model="data.obj.expiryday"
        placeholder="请输入保质期(天数)"
        label="保质期"
      />

      <van-field
        v-model="data.obj.explain"
        placeholder="请输入商品描述"
        label="商品描述"
      />
      <van-field name="uploader" label="封面">
        <template #input>
          <van-uploader
            v-model="data.obj.photo"
            :after-read="methods.afterRead"
          />
        </template>
      </van-field>
    </van-cell-group>

    <!-- 新增商品 商品类型弹框 start -->
    <!-- <van-action-sheet v-model:show="type_show">
        <div class="content">
          <span class="weight">请选择商品类型</span>
  
          <div class="xian"></div>
          <van-tree-select
            style="
              display: block;
              --van-sidebar-selected-border-height: 0px;
              --van-sidebar-selected-font-weight: 600;
              --van-font-bold: 500;
            "
            v-model:active-id="activeId"
            v-model:main-active-index="activeIndex"
            :items="data.items"
            @click-item="() => methods.selectType()"
          />
  
        </div>
      </van-action-sheet> -->
    <div class="my_divider"></div>
    <div style="width: 100%; margin-top: 30px">
      <van-button
        block
        style="width: 97%; margin: auto"
        type="primary"
        @click="() => methods.addGoods()"
        >新增</van-button
      >
    </div>
    <!-- 新增商品 商品类型弹框 end -->
  </div>
</template>
  
  <script setup>
import { SupplierAddGoods, getGoodsTypes, uploads } from "@/api/manage";
import { BASE_URL } from "@/utils/config";
import { load } from "@/utils/load";
import { showToast } from "vant";
import { onMounted, reactive, ref } from "vue";
const date = ref(""); //日期属性
const date_show = ref(false); //日期弹框
const type_show = ref(false); //商品类型
const activeId = ref(1); //类型选择框选中右边的数据id
const activeIndex = ref(0); //类型选择框选中左边的数据id
const photos=ref("");

const fieldValue = ref("");
const cascaderValue = ref("");

// 选择商品类型方法
const onFinish = ({ selectedOptions }) => {
  type_show.value = false;
  fieldValue.value = selectedOptions.map((option) => option.text).join("/");
};

const data = reactive({
  options: [],
  obj: {
    name: "",
    type: "",
    specs: "",
    price: "",
    birthday: "",
    expiryday: "",
    explain: "",
    photo: [],
  },
});

const formatDate = (date) =>
  `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
const onConfirm = (value) => {
  date_show.value = false;
  date.value = formatDate(value);
};

const methods = {
  addGoods: async() => {
    const obj={...data.obj,type:cascaderValue.value,birthday:date.value,photo:photos.value};
    if(obj.name==""){
      showToast("请输入商品名称");
      return
    }

    if(obj.specs==""){
      showToast("请输入商品规格");
      return
    }

    if(obj.type==""){
      showToast("请选择商品类型");
      return
    }
    if(obj.price===""){
      showToast("请选择商品价格");
      return
    }
    if(obj.photo===""){
      showToast("请选择商品照片");
      return
    }
    if(obj.birthday===""){
      showToast("请选择商品生产日期");
    }

    if(obj.expiryday===""){
      showToast("请选择商品保质期");
    }
load();
  const res= await SupplierAddGoods(obj);
  if(res.result===0){
    showToast("新增成功");
  }else{
    showToast(res.message);
  }
  },
  /**
   * 获取商品类型
   */
  getTypes: async () => {
    const res = await getGoodsTypes();
    const typs = res.data.map((d) => {
      return {
        text: d.name,
        value: d.id,
      };
    });
    data.options = typs;
    console.log(data.options, "lllllllllllll");
  },
  /**
   * 上传照片事件
   */
  afterRead: (file) => {
    // 此时可以自行将文件上传至服务器
    const formData = new FormData();
    formData.append('file', file.file);
  
    uploads(formData).then((res) => {
           photos.value=res;
    })
  },
};

onMounted(() => {
  methods.getTypes();
});
</script>
  
  <style  scoped>
/* 补货弹出框样式 */
.content {
  padding: 16px 16px 200px;
}

.xian {
  width: 40px;
  height: 3px;
  /* border: 1px solid #000; */
  border-radius: 2px;
  background: #1989fa;
  position: relative;
  top: 45px !important;
  left: 14px;
  z-index: 9999999999999999;
}

.van-ellipsis.van-tree-select__item {
  font-weight: 500 !important;
}
</style>